import React from 'react';

export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',
    // 列表数据
    list: [
      {
        id: 1,
        username: '杜甫',
        content: '读书破万卷，下笔如有神。',
      },
      {
        id: 2,
        username: '王阳明',
        content: '志不立，天下无可成之事。',
      },
      {
        id: 3,
        username: '苏轼',
        content: '古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。',
      },
    ],
  };

  handleSubmit = () => {};
  handleClear = () => {};
  // 删除列表方法
  handleDel = (id) => {
    console.log('this.state.list----->', this.state.list);
    // this.state.list.splice() 错误写法
    // filter过滤方法来实现
    this.setState({
      // 通过filter过滤出不等于id的列表数据
      list: this.state.list.filter((item) => item.id !== id),
    });
  };
  render() {
    return (
      <div>
        <div className="app">
          {/* 表单提交的时候，运行发布评论的函数 */}
          <form>
            <input
              value={this.state.username}
              className="user"
              type="text"
              placeholder="请输入评论人"
            />
            <br />
            <textarea
              value={this.state.content}
              className="content"
              cols="30"
              rows="10"
              placeholder="请输入评论内容"
            />
            <br />
            <button onClick={this.handleSubmit}>发表评论</button>
            <button onClick={this.handleClear} type="button">
              清空评论
            </button>
          </form>
          <ul>
            {this.state.list.map((item) => {
              return (
                <li>
                  <h3>评论人: {item.username}</h3>
                  <p>评论内容：{item.content}</p>
                  {/* 绑定事件，并且传递ID参数 */}
                  <button onClick={() => this.handleDel(item.id)}>删除</button>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }
}
